<template>
  <div class="bindtel-page">
    <div class="bindtel-contain">
      <div class="account-nav">
        <van-nav-bar title="换绑手机" right-text="" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="account-content">
        <div class="bind-tip">
          <div class="tip-icon">
            <img src="http://static-as.missfresh.cn/frontend/img/set-password-tip.png">
          </div>
          <div class="tip-text">
            <div class="binding-tip">优好生活</div>
            <div class="binding-tip">换绑手机</div>
          </div>
        </div>
        <div class="bind-panel">
          <div class="list list-inset">
            <div class="list-item">
              <label class="item item-input">
                <input type="tel" maxlength="11" v-model="telInfo.mobileNum"  @blur="regexMobile" placeholder="请输入您原手机号">
              </label>
              <div class="item-right item-right-clear">
                <div>
                  <i v-show="telInfo.mobileNum" class="clear" @click.stop.prevent="clearMobile"></i>
                </div>
              </div>
            </div>
            <div class="list-item">
              <label class="item item-input">
                <input type="tel" maxlength="11" v-model="telInfo.mobileNum" placeholder="请输入您新手机号" @blur="regexMobile">
              </label>
              <div class="item-right">
                <button class="button-getcode" @click.stop.prevent="getVerifyCode" :disabled="disabled || time > 0">{{btnText}}</button>
              </div>
            </div>
            <div class="list-item">
              <label class="item item-input">
                <input type="tel" maxlength="6" v-model="telInfo.code" placeholder="输入验证码">
              </label>
              <div class="item-right item-right-clear">
                <div>
                  <i v-show="telInfo.code" class="clear" @click.stop.prevent="clearCode"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="binding">
            <button @click.stop.prevent="bindTel" :class="{active:telInfo.code.length === 6}" class="button-bind" :disabled="bindDisabled">绑定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Toast } from 'vant'

Vue.use(NavBar).use(Icon)

export default {
  data() {
    return {
      time: 0,
      second: 60,
      disabled: false,
      bindDisabled: true,
      telInfo: {
        mobileNum: '',
        code: ''
      }
    }
  },
  computed: {
    btnText() {
      return this.time > 0 ? '已发送(' + this.time + 's)' : '获取验证码'
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/user/account'
      })
    },
    regexMobile() {
      this.checkTel()
    },
    getVerifyCode() {
      if (this.checkTel()) {
        this.send()
      }
    },
    bindTel() {
      this.checkTel()
      // 綁定手機賬號
    },
    clearCode() {
      this.telInfo.code = ''
    },
    checkTel() {
      let reg = /^1(3[0-9]|4[57]|5[0-35-9]|6[6]|8[0-9]|9[89]|7[0678])\d{8}$/
      let flag = reg.test(this.telInfo.mobileNum)
      if (!flag) {
        Toast('请输入正确的手机号码')
        return false
      }
      return true
    },
    run() {
      this.time = this.second
      this.timer()
    },
    timer() {
      if (this.time > 0) {
        this.time = this.time - 1
        setTimeout(this.timer, 1000)
      }
    },
    send() {
      this.disabled = true
      setTimeout(this.sended, 2000)
    },
    sended() {
      this.run()
      this.disabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
.bindtel-page {
  width: 100%;
  height: 100vh;
  background-color: $white;
  .account-content {
    .bind-tip {
      @include allCFlex();
      margin: 30px 0;
      .tip-icon {
        margin-right: 8px;
        img {
          @include size(54px);
        }
      }
      .tip-text {
        font-size: 16px;
        height: 45px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
    .bind-panel {
      .list {
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 0;
      }
      .list-inset {
        overflow: hidden;
        margin: 0 30px 10px;
        border-radius: 2px;
        background: 0 0;
      }
      .list-item {
        position: relative;
        .item {
          border: none;
          border-bottom: 1px solid #e6e6e6;
          padding: 5px 0;
          background: 0 0;
          input {
            flex: 1 220px;
            border: none;
            width: 100%;
            font-size: 16px;
            color: #262626;
            padding: 20px 0 15px;
            background: 0 0;
            line-height: 16px;
          }
        }
        .item-right {
          position: absolute;
          right: 0;
          top: 8px;
          z-index: 10;
          .clear {
            background: url(https://static-as.missfresh.cn/frontend/img/close-number.png)
              no-repeat;
            color: transparent;
            background-size: 100% 100%;
            display: inline-block;
            width: 20px;
            height: 20px;
          }
          .button-getcode {
            font-size: 14px;
            color: #ff4891;
            padding: 5px 5px 4px;
            border: 1px solid #ff4891;
            border-radius: 5px;
            background: #fff;
            font-weight: 400;
            line-height: 1.42587;
          }
          &-clear {
            top: 19px;
          }
        }
      }
      .binding {
        padding: 20px 30px 15px;
        .button-bind {
          width: 100%;
          min-height: 40px;
          border: none;
          border-radius: 5px;
          margin: 0;
          color: $white;
          background-color: #b8b3ba;
          &.disabled,
          &[disabled] {
            opacity: 0.4;
            cursor: default !important;
            pointer-events: none;
          }
          &.active {
            background-color: #ff4891;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>